Bookmark and Share

HTML - Meta Tags and Meta Data

Meta tags are used to supply information for search engines that will not be seen by the web surfer. These invisible units provide a flag for search engines to investigate and will then present that data to any potential users that stumble across your site through a search engine.

Advertise on Tizag.com

In the past, meta tags were the primary means for your site to be recognized by web spiders, but webmasters abused meta tags to improve their rankings in search engines. As a result, search engines have since modified their approach to keep results accurate. They now rely less on meta tags. Nevertheless, you should still include meta for those search bots that still do recognize them.

HTML - Meta Tag Description

Search engines are the compasses of the web and help users navigate from site to site. Chances are, if you've used a search engine, you've probably seen the description meta tag in action.

Meta elements must be placed inside of the <head> element in order for them to be recognizable by web crawlers and bots. The <meta> tag generally requires the name and content attributes to be working together to present your web page in a good light.

HTML Code:

<head>
<meta name="description" content="Tizag contains webmaster tutorials." />
</head>

The description meta element allows the developer to summarize the content that can be found on the page and is often the first chance you'll have to attract visitors. These brief narratives and hooks are often the only opportunity you'll have to generate a lasting first impression.

HTML - Keyword Meta Tags

Keywords and/or phrases may be placed inside the keyword meta element. You should specify the most popular search terms you believe someone would use to reach your website. A few years back, you could spam this meta tag with any and every keyword possible to gain ranking on search engines. Now, however, repeated words, or words that do not pertain to the content of the site, will not benefit your search engine rankings.

HTML Code:

<head>
<meta name="keywords" content="keyword, key keywords, etc" />
</head>

Separate each phrase/word with a comma to create large lists. An example of the keywords meta tag for Tizag.com would go something like this:

HTML Code:

<head>
<meta name="keywords" content="HTML, XHTML, CSS, tutorials, tizag" />
</head>

Keep in mind that driving traffic and having your site listed high in the search engine rankings is not as easy as placing keywords inside your meta element. The phrase "Search Engine Optimization (SEO)" was coined to describe the rigorous process involved in achieving rankings in search engines. While meta tags do play a small role in this process, they are by no means a one-stop shop for your SEO needs.

HTML - Refresh and Redirect Meta

Later down the road, you may need to redirect traffic to another domain. A common reason might be that you have just purchased a better domain name and would like to retain your old visitors, yet still use your new domain. With the refresh meta tag, you will be able to redirect visitors to the website of your choice or simply refresh your own page to update dynamic content automatically.

For the refresh meta tag, the content attribute accepts two arguments separated by a semicolon (;). The first argument specifies the number of seconds between refreshes or redirection and the 2nd argument is a URL of where the browser will relocate.

HTML Redirect Meta Tag:

<head>
<meta http-equiv="refresh" content="10; url=http://www.tizag.com" />
</head>

The above code refreshes Tizag's home page every 10 seconds. A quick refresh may be necessary for news, stocks, or any other time-sensitive information. The most common use for this type of meta tag, however, is redirection. To redirect a viewer automatically, just change the URL to the new site, like shown below. This code will send your visitors to espn.com after landing at your site for five seconds.

HTML Page Refresh Meta Tag:

<head>
<meta http-equiv="refresh" content="5; url=http://www.espn.com" />
</head>

HTML - Revised Meta

The revised meta tag records when the last update was done to the site.

HTML Code:

<head>
<meta name="revised" content="Happy New Year: 1/1/2003" />
</head>

Don't forget to get a little meta with your pages!

Bookmark and Share


Tips

  • It's important not to repeat words in the description or keywords meta tags
  • Meta is not the only way to have your site seen by search engines. Do not rely on meta tags alone to get your website listed on search engines.
  • If your domain (.com) ever changes, remember to place a simple, "Our site has moved" message as the existing domain, and then use a redirect meta tag to make life easier for your viewers that already may have your site bookmarked.


Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials